<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr {
            text-align: center;
        }
    </style>
</head>


<body>

    <div id="app">
        <p>请选择你要购买的书籍</p>
        <ul>
        </ul>
        <table v-if="arr.length" border="1" width="500" cellspacing="0">
            <tr>
                <th><input type="checkbox" v-model="checkAll"></th>
                <th>序号</th>
                <th>书名</th>
                <th>单价</th>
                <th>数量</th>
                <th>合计</th>
                <th>你干嘛</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <td><input type="checkbox" v-model="item.isSelect" @click="clickIpu(index)"></td>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.count}}</td>
                <td>{{item.count*item.price}}</td>
                <td>
                    <button @click="sub(index)">退钱!</button>
                    <button @click="add(index)">买书</button>
                </td>
            </tr>
        </table>
        <div v-else>本地数据丢失</div>

        <p>总价格为: {{total}}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr:
                    [
                        {
                            name: "水浒传",
                            price: 107,
                            count: 0,
                            isSelect: false
                        },
                        {
                            name: "西游记",
                            price: 192,
                            count: 0,
                            isSelect: false

                        },
                        {
                            name: "三国演义",
                            price: 219,
                            count: 0,
                            isSelect: false

                        },
                        {
                            name: "红楼梦",
                            price: 178,
                            count: 0,
                            isSelect: false
                        },
                    ],
                //正常渲染数组arr
                // arr: JSON.parse(localStorage.getItem('books'))
            },
            computed: {
                total: {
                    get() {
                        return this.arr.reduce((num, v) => num += v.price * v.count, 0)
                    },
                    set() {

                    }
                },
                checkAll: {
                    get() {
                        return this.arr.every(v => v.isSelect == true);
                        //判断每一项是否选中 如果是 全选框自动勾上
                    },
                    set(val) {
                        this.arr.forEach(v => {
                            v.isSelect = val
                            // 当全选框状态改变时(勾上和没勾上):
                            if (val && v.count == 0) {
                                v.count++ //勾上而且 哪本书的数量为0  数量++
                            } else if (!val) {
                                v.count = 0//没勾上 所有书本数量清空
                            }
                        });
                    }
                },
            },
            methods: {
                add(v) {
                    this.arr[v].count++
                },
                sub(v) {
                    if (this.arr[v].count == 0) {
                        return
                    }
                    this.arr[v].count--
                },
                clickIpu(v) {
                    // this.isSelect = !this.isSelect
                    // console.log(this);
                    this.arr[v].count == 0 ? this.arr[v].count++ : this.arr[v].count = 0
                }
            },
            watch: {
                arr: {
                    handler() {
                        localStorage.setItem('books', JSON.stringify(this.arr))
                        // console.log('数量变了');
                    },
                    deep: true,//开启深度监听
                    // immediate: true,//页面初始化时 handler立即执行一次 (可选)
                }
            }
        })

    </script>
</body>

</html>